import React, { Component } from 'react';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import Toggle from 'material-ui/Toggle';
import DatePicker from 'material-ui/DatePicker'; 

const optionsStyle = {
  maxWidth: 255,
  marginRight: 'auto',
};
// Task component - represents a single todo item
export default class Tab7 extends Component {
  constructor(props) {
    super(props);
    const minDate = new Date();
    const maxDate = new Date();
    minDate.setFullYear(minDate.getFullYear() - 1);
    minDate.setHours(0, 0, 0, 0);
    maxDate.setFullYear(maxDate.getFullYear() + 1);
    maxDate.setHours(0, 0, 0, 0);

    this.state = {
      minDate: minDate,
      maxDate: maxDate,
      autoOk: true,
      disableYearSelection: false,
      expanded: false,
    };
  }

  handleExpandChange(expanded){
    this.setState({expanded: expanded});
  };

  handleToggle(event, toggle){
    this.setState({expanded: toggle});
  };

  handleExpand() {
    this.setState({expanded: true});
  };

  handleReduce(){
    this.setState({expanded: false});
  };

  render() {
    return (
      <Card expanded={this.state.expanded} onExpandChange={this.handleExpandChange.bind(this)}>
        <CardHeader
          title="小龙女玉蜂养殖项目"
          subtitle="陕西省西安市户县祖庵镇扶贫办"
          avatar="images/adellecharles-128.jpg"
          actAsExpander={true}
          showExpandableButton={true}
        />
          <DatePicker
            onChange={this.handleChangeMinDate}
            autoOk={this.state.autoOk}
            floatingLabelText="立项日期"
            defaultDate={this.state.minDate}
            style={{width: '40%',margin: '5%',float: 'left'}}
          />
          <DatePicker
            onChange={this.handleChangeMaxDate}
            autoOk={this.state.autoOk}
            floatingLabelText="批准日期"
            defaultDate={this.state.maxDate}
            style={{width: '40%',margin: '5%',float:'right'}}
          />
        <CardMedia
          expandable={true}
          overlay={<CardTitle title="账户交易一览" subtitle="点击图中交易连线或账户可看详情" />}
        >
          <img src="images/chord.png" />
        </CardMedia>
      </Card>
    );
  }
}

